import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

export default class RepositoryCell extends Component{
    constructor(props){
        super(props)
        this.state = {
            isFavorite: this.props.projectModel.item.isFavorite,
            favoriteIcon: this.props.projectModel.item.isFavorite
                ?
                require('../res/images/ic_star.png')
                :
                require('../res/images/ic_unstar_transparent.png')
        }
    }
    setFavoriteState(isFavorite){
        this.setState({
	        isFavorite: isFavorite,
            favoriteIcon: isFavorite ? require('../res/images/ic_star.png') : require('../res/images/ic_unstar_transparent.png')
        })
    }
    componentWillReceiveProps(nextProps){
        this.setFavoriteState(nextProps.projectModel.item.isFavorite);
    }
    onPressFavorite(){
        this.setFavoriteState(!this.state.isFavorite);
        this.props.onFavorite(this.props.projectModel.item.item, !this.state.isFavorite);
    }
    render(){
        let data  = this.props.projectModel.item;
        console.log('this.props.data.item',data);
        let favoriteButton = <TouchableOpacity
                                onPress={()=>{
                                    this.onPressFavorite();
                                }}
                            >
                                <Image
                                    style={[{width: 22, height: 22},{tintColor:"#2196F3"}]}
                                    source={this.state.favoriteIcon}
                                />
                            </TouchableOpacity>
        return (<TouchableOpacity
            onPress={this.props.onSelect}
            style={styles.container}
        >
            <View style={styles.cell_container}>
                <Text style={styles.title}>{data.item.full_name}</Text>
                <Text style={styles.description}>{data.item.description}</Text>
                <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                    <View style={{flexDirection: 'row', alignItems:'center'}}>
                        <Text>Author:</Text>
                       <Image
                            style={{height:22, width: 22}}
                            source={{uri:data.item.owner.avatar_url}}
                        />
                    </View>
                    <View style={{flexDirection: 'row', alignItems:'center'}}>
                        <Text>Stars:</Text>
                        <Text>{data.item.stargazers_count}</Text>
                    </View>
                    {favoriteButton}
                </View>
            </View>
        </TouchableOpacity>)
    }
}

const styles= StyleSheet.create({
    container: {
      flex: 1
    },
    title: {
        fontSize: 16,
        marginBottom: 2,
        color: '#212121'
    },
    description: {
        fontSize: 14,
        marginBottom: 2,
        color: '#757575',
        borderRadius: 2
    },
    cell_container: {
        backgroundColor: 'white',
        padding: 10,
        marginLeft: 5,
        marginRight: 5,
        marginVertical: 3,
        borderColor: '#dddddd',
        borderWidth: 0.5,
        shadowColor: 'gray',
        shadowOffset: {width: 0.5, height: 0.5},
        shadowOpacity: 0.4,
        shadowRadius: 1,
        elevation: 2,
    }
})
